import React, { memo, useEffect } from 'react'
import { HeaderRightWrapper } from './style'
import IconGlobal from '@/assets/svg/icon_global'
import IconMenu from '@/assets/svg/icon_menu'
import IconAvatar from '@/assets/svg/icon_avatar'

const HeaderRight = memo(() => {

  const [showPenal, setShowPenal] = React.useState(false)

  useEffect(() => {
    const setShowPenalHandle = () => {
      setShowPenal(false)
    }
    window.addEventListener('click', setShowPenalHandle, true)
    return () => {
      window.removeEventListener('click', setShowPenalHandle, true)
    }
  }, [])

  return (
    <HeaderRightWrapper>
       <div className='left'>
        <span className='item'>登录</span>
        <span className='item'>注册</span>
        <span className='item'>
          <IconGlobal></IconGlobal>
        </span>
       </div>
       <div className='right' onClick={e => setShowPenal(true)}>
        <IconMenu></IconMenu>
        <IconAvatar></IconAvatar>
        {showPenal && (
          <div className='penal'>
          <div className='penal_top'>
            <span className='penal_item'>登录</span>
            <span className='penal_item'>注册</span>
          </div>
          <div className='penal_bottom'>
            <span className='penal_item'>个人中心</span>
            <span className='penal_item'>历史记录</span>
            <span className='penal_item'>客服中心</span>
            <span className='penal_item'>帮助中心</span>
          </div>
        </div>
        )}

       </div>
    </HeaderRightWrapper>
  )
})

export default HeaderRight